<template>
  <div class="hotLive">
    <div class="title">
      <img src="@/assets/images/001.png"/>
      <p>热门直播</p>
    </div>
    <div class="list" v-for="(item, index) in  liveList"  @click="jumpdetail(item.id,item.status)">
      <img class="left" :src="item.pic"/>
      <div class="right">
        <p class="top">{{item.name.substring(0,20)}}</p>
        <p>直播时间</p>
        <p>{{item.startedat}}</p>
        <p class="bottom">观看人数:<span>{{item.viewnum}}</span></p>
      </div>
      <div class="tag" v-if="item.status===3">待开始</div>
      <div class="tag ing" v-if="item.status===2">进行中</div>
      <div class="tag ed" v-if="item.status===1">已结束</div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "list",
    data() {
      return {
        name: '',
      }
    },
    props: {
      liveList: {
        Type: Array,
        default: () => []
      }
    },
    methods: {
      jumpdetail(id,status) {
        this.$emit('jump',id,status);
      },
    }
  }
</script>

<style scoped lang="less">
  .hotLive {
    .title {
      height: 55px;
      font-weight: bold;
      display: flex;
      align-items: center;
      justify-content: center;
      img {
        padding-right: 5px;
        width: 20px;
        height: 20px;
      }
    }
    .list {
      position: relative;
      margin: 10px;
      display: flex;
      height: 90px;
      .left {
        padding-right: 10px;
        width: 40%;
      }
      .right {
        width: 60%;
        padding: 2px 0 2px 0;
        text-align: left;
        color: gray;
        font-weight: bold;
        line-height: 160%;
        font-size: 10px;
        .top {
          font-weight: bold;
          color: black;
        }
        .bottom {
          position: absolute;
          bottom: 4px;
        }
      }
      .tag {
        position: absolute;
        bottom: 4px;
        right: 10px;
        padding: 2px 6px 2px 6px;
        background-color: cornflowerblue;
        border-radius: 4px;
        color: white;
        font-size: 10px;
        font-weight: bold;
      }
      .ed {
        background-color: red !important;
      }
      .ing {
        background-color: #1bbacd !important;
      }
    }
  }
</style>
